<template>
  <div class="app-container">
    <FormFilter @submit-form="submitFilterForm"></FormFilter>
     <div style="padding: 10px 0;">
      <el-button-group>
        <el-button type="danger" size="mini"  @click="multipleOpenDialog">批量开关转账</el-button>
        <el-button type="warning" size="mini" @click="multipleAmountDialog" >批量限制转账金额</el-button>      
      </el-button-group>
    </div>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              @selection-change="handleSelectionChange"
              style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="注册时间" align="center" prop="registerDate">
        <template slot-scope="{row}">
          {{row.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="玩家类型" align="center" prop="userType">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="所属上级" align="center" prop="parentName"></el-table-column>
      <el-table-column label="会员账户" align="center" prop="username"></el-table-column>
      <el-table-column label="向中心钱包转账限额" align="center">
         <el-table-column label="每日可转次数" align="center" prop="inTimes"></el-table-column>
         <el-table-column label="每日可转金额（最低）" align="center" prop="inMin"></el-table-column>
         <el-table-column label="每日可转金额（最高）" align="center" prop="inMax"></el-table-column>
      </el-table-column>
      <el-table-column label="向游戏钱包转账限额" align="center">
         <el-table-column label="每日可转次数" align="center" prop="outTimes"></el-table-column>
         <el-table-column label="每日可转金额（最低）" align="center" prop="outTimes"></el-table-column>
         <el-table-column label="每日可转金额（最高）" align="center" prop="outTimes"></el-table-column>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="transferOpenSet(row)" >转账开关设置
          </el-button>
          <el-button type="text" @click="openDialog({dialogName: 'transfer-amount-dialog', props: row })" >限制转账金额
          </el-button>       
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>


     <transfer-open-dialog
      v-if="dialogName === 'transfer-open-dialog'"
      :showValue="dialogVisible"
      :row-data="dialogProps"
      :user-id="multipleSelection"
      @closeDialog="closeTransferOpenDialog"
      @submit="submitFinished"/>

     <transfer-amount-dialog
      v-if="dialogName === 'transfer-amount-dialog'"
      :showValue="dialogVisible"
      :row-data="dialogProps"
      :user-id="multipleSelection"
      @closeDialog="closeTransferAmountDialog"
      @submit="submitFinished"/>
  </div>
</template>

<script>
import { form, grid, dialog } from "@/build";
import TransferOpenDialog from "./transferOpen";
import TransferAmountDialog from "./transferAmount";
import FormFilter from "./formFilter";

import { riskTransferListApi as listApi } from "@/services/api/risk";

export default {
  name: "award-rate",

  mixins: [form, grid, dialog],

  components: {
    TransferOpenDialog,
    TransferAmountDialog,
    FormFilter
  },

  props: ["id"],

  data() {
    return {
      tableData: [],
      filters: {
        size: 20,
        page: 1,
        startTime:moment(consts.ONLINE_DATE).format('YYYY-MM-DD 00:00:00'),
        endTime:moment().format('YYYY-MM-DD 23:59:59'),
      },
      multipleSelection: [],
      dialogVisible: false,
      step: "agree"
    };
  },

  mounted() {
    this.bindGet(listApi, "tableData", {
      action: "getGrid",
      sendingData: "filters"
    });

    this.getAll();
  },
  methods: {
    multipleOpenDialog(){
      this.openDialog({dialogName: 'transfer-open-dialog'})
    },
    multipleAmountDialog(){
      this.openDialog({dialogName: 'transfer-amount-dialog'})
    },
    transferOpenSet(row){
      this.multipleSelection=[row]
      this.openDialog({dialogName: 'transfer-open-dialog', props: row })
    },
    transferAmountSet(row){
      this.multipleSelection=[row]
      this.openDialog({dialogName: 'transfer-amount-dialog', props: row })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setStep(step) {
      this.step = step;
    },
    closeTransferOpenDialog() {
      this.dialogVisible = false;
    },
    closeTransferAmountDialog() {
      this.dialogVisible = false;
    },

    submitFilterForm(formInline) {
      const { date } = formInline;
      let startTime = undefined,
        endDate = undefined;
      if (!_.isUndefined(date) && _.isArray(date)) {
        startTime = formInline.date[0];
        endDate = formInline.date[1];
        formInline = { ...formInline, startTime, endDate };
      } else {
        this.filters.startTime = undefined;
        this.filters.endDate = undefined;
      }
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    }
  }
};
</script>

